<template>
  <div class="teacher-list">
    <el-card class="page-card">
      <template #header>
        <div class="card-header">
          <span>教师列表</span>
          <el-button type="primary" @click="handleCreate">新增教师</el-button>
        </div>
      </template>

      <el-form :inline="true" class="search-form">
        <el-form-item label="教师姓名">
          <el-input v-model="searchForm.name" placeholder="请输入教师姓名" />
        </el-form-item>
        <el-form-item label="科目">
          <el-input v-model="searchForm.subject" placeholder="请输入科目" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <DataTable
        :data="tableData"
        :columns="columns"
        :pagination="pagination"
        v-loading="loading"
        @update:pagination="handlePaginationChange"
      >
        <template #status="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'info'">
            {{ row.status === 'active' ? '在职' : '离职' }}
          </el-tag>
        </template>
        
        <template #actions="{ row }">
          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button link type="primary" @click="handleAssign(row)">班级管理</el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </DataTable>
      <TeacherForm ref="teacherFormRef" @success="loadTeacherList" />
      <TeacherClassList ref="classListRef" @success="loadTeacherList" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import DataTable from '../../components/common/DataTable.vue'
import { teacherService } from '../../services/teacher'
import { ElMessageBox } from 'element-plus'
import { showSuccess, showError } from '../../utils/message'
import TeacherForm from '../../components/teachers/TeacherForm.vue'
import TeacherClassList from '../../components/teachers/TeacherClassList.vue'

const router = useRouter()
const loading = ref(false)
const tableData = ref([])
const teacherFormRef = ref(null)
const classListRef = ref(null)

// 表格列配置
const columns = [
  { prop: 'name', label: '姓名', width: '120',align: 'center' },
  { prop: 'phone', label: '手机号',align: 'center' },
  { prop: 'email', label: '邮箱', width: '180',align: 'center' },
  { prop: 'subject', label: '科目',align: 'center' },
  { prop: 'status', label: '状态', width: '100', slot: 'status',align: 'center' },
  { label: '操作', width: '250', fixed: 'right', slot: 'actions',align: 'center' }
]

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const searchForm = ref({
  name: '',
  subject: ''
})

const loadTeacherList = async () => {
  try {
    loading.value = true
    const { data, total: totalCount } = await teacherService.getTeachers(
      searchForm.value,
      pagination.currentPage,
      pagination.pageSize
    )
    tableData.value = data
    pagination.total = totalCount
  } catch (error) {
    showError('加载教师列表失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

const handlePaginationChange = (newPagination) => {
  Object.assign(pagination, newPagination)
  loadTeacherList()
}

const handleSearch = () => {
  pagination.currentPage = 1
  loadTeacherList()
}

const handleReset = () => {
  searchForm.value = {
    name: '',
    subject: ''
  }
  handleSearch()
}

const handleCreate = () => {
  teacherFormRef.value?.open()
}

const handleEdit = (row) => {
  teacherFormRef.value?.open(row)
}

const handleAssign = (row) => {
  classListRef.value?.open(row)
}

const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除教师"${row.name}"吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    await teacherService.deleteTeacher(row.id)
    showSuccess('删除成功')
    loadTeacherList()
  } catch (error) {
    if (error !== 'cancel') {
      showError('删除失败')
      console.error(error)
    }
  }
}

onMounted(() => {
  loadTeacherList()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
